<template>
  <div>
    <Form :model="modelForm" ref="formRef" :label-width="100" :rules="rules">
      <Row>
        <Col span="12">
          <FormItem :label="$t('module.importExport.templateCode')" prop="templateCode">
            <Input
              disabled
              v-model="modelForm.templateCode"
              :placeholder="$t('common.pleaseInput') + $t('module.importExport.templateCode')"
            ></Input>
          </FormItem>
        </Col>
        <Col span="12">
          <FormItem :label="$t('module.importExport.templateName')" prop="templateName">
            <Input
              :disabled="state == 2"
              v-model="modelForm.templateName"
              :placeholder="$t('common.pleaseInput') + $t('module.importExport.templateName')"
            ></Input>
          </FormItem>
        </Col>
      </Row>
      <Row>
        <Col span="12">
          <FormItem :label="$t('module.importExport.checkService')" prop="checkService">
            <!-- <Select :disabled="state == 2" v-model="modelForm.checkService" :transfer="true" :clearable="true">
              <Option v-for="item in serviceList" :value="item.vsiKey" :key="item.vsiKey">{{ item.vsiValue }}</Option>
            </Select>-->
            <Input
              v-model="modelForm.checkService"
              :disabled="state == 2"
              :placeholder="$t('common.pleaseInput') + $t('module.importExport.checkService')"
            ></Input>
          </FormItem>
        </Col>
        <Col span="12">
          <FormItem :label="$t('module.importExport.importService')" prop="importService">
            <Input
              v-model="modelForm.importService"
              :disabled="state == 2"
              :placeholder="$t('common.pleaseInput') + $t('module.importExport.importService')"
            ></Input>
          </FormItem>
        </Col>
      </Row>
      <FormItem :label="$t('module.importExport.templateRule')" prop="ruleDefine">
        <Input
          type="textarea"
          :rows="12"
          v-model="modelForm.ruleDefine"
          :disabled="state == 2"
          :placeholder="$t('common.pleaseInput') + $t('module.importExport.templateRule')"
        ></Input>
      </FormItem>
    </Form>
  </div>
</template>

<script>
import { saveRule } from "@/api/ImportExport";
import local from "./locales.js";

export default {
  name: "AddTemplate",
  mixins: [local],
  props: {
    rowInfo: Object,
    state: Boolean
  },
  data() {
    return {
      modelForm: {
        templateName: "",
        templateCode: "",
        checkService: "",
        importService: "",
        ruleDefine: "",
        id: this.rowInfo ? this.rowInfo.id : ""
      },
      rules: {
        templateName: [
          {
            required: true,
            message: this.$t("common.pleaseInput") + this.$t("module.importExport.templateName"),
            trigger: "blur"
          }
        ],
        importService: [
          {
            required: true,
            message: this.$t("common.pleaseInput") + this.$t("module.importExport.importService"),
            trigger: "blur"
          }
        ],
        ruleDefine: [
          {
            required: true,
            message: this.$t("common.pleaseInput") + this.$t("module.importExport.templateRule"),
            trigger: "blur"
          }
        ]
      },
      actions: [
        {
          text: this.$t("common.save"),
          theme: "primary",
          handle: () => {
            this.save();
          },
          loading: false
        },
        {
          text: this.$t("common.close"),
          handle: () => {
            this.$emit("Close");
          }
        }
      ]
    };
  },

  created: function() {
    this.$emit("SetTitle", this.$t("module.importExport.configRule"));
    this.$emit("SetPageWidth", 820);
    this.$emit("SetPageActions", this.actions);
    if (this.rowInfo.id) {
      this.modelForm = Object.assign(this.modelForm, this.rowInfo);
    }
  },

  methods: {
    save() {
      this.$refs["formRef"].validate(valid => {
        if (valid) {
          this.actions[0].loading = true;
          saveRule(this.modelForm).then(res => {
            this.$emit("Close", true);
            this.$message.success({
              content: this.$t("common.saveSuccess"),
              duration: 3
            });
          });
        } else {
          this.$message.error({
            duration: 3,
            content: this.$t("common.formValidateFailed")
          });
        }
      });
    }
  }
};
</script>

<style></style>
